<template>
	<el-container>
		<el-header height="100px" style="background-color: #339999;">
			<div style="float: left;margin-left: -30px;">
			</div>
			<el-row type="flex" justify="end">
				<el-col :span="18" style="color: azure; margin-top: 18px; font-weight: 900;font-size: 30px;">CRM系统
				</el-col>
				<el-col :span="6" style=" margin-top: 18px;">
					<el-button-group>
						<el-button type="success">{{username}}</el-button>
						<el-button type="warning" @click="returnFisrt()">主页面</el-button>
						<el-button type="primary" icon="el-icon-switch-button" @click="logout()"></el-button>
					</el-button-group>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside width="220px">
				<el-row>
					<el-col :span="24">
						<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
							@close="handleClose" router background-color="#374758" text-color="#fff"
							active-text-color="#ffd04b">
							<div v-for="(item,index) in submenuList" :key="index">
								<!-- 一级菜单（没有任何子级菜单）-->
								<el-menu-item :index="item.path+''" v-if="!item.children">{{item.title}}</el-menu-item>
								<!-- 一级菜单（有子级菜单）-->
								<el-submenu :index="item.id.toString()" v-else>
									<template slot="title">{{item.title}}</template>

									<!-- 遍历二级菜单容器 -->
									<div v-for="(i,index) in item.children" :key="index">
										<!-- 判断二级菜单（没有三级菜单）-->
										<el-menu-item :index="i.path+''" v-if="!i.children">{{i.title}}</el-menu-item>

										<!-- 判断二级菜单（有三级菜单）-->
										<el-submenu :index="i.id.toString()" v-if="i.children">
											<template slot="title">{{i.title}}</template>
											<el-menu-item :index="j.path+''" v-for="(j,index) in i.children"
												:key="index">
												{{j.title}}
											</el-menu-item>
										</el-submenu>
									</div>
								</el-submenu>
							</div>
						</el-menu>
					</el-col>
				</el-row>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				submenuList: [],
				username: "",
			}
		},
		methods: {
			returnFisrt() {
				this.$router.push("/first");
			},
			handleOpen(key, keyPath) {
				// console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				// console.log(key, keyPath);
			},
			logout() {
				axios.get("/mylogout").then(resp => {
						if (resp.code == 20000) {
							this.$router.push("/login");
							localStorage.removeItem("userName");
							localStorage.removeItem("userId");
							sessionStorage.removeItem("admin_token");
						}
					})
			}
		},
		mounted() {
			this.username = localStorage.getItem("userName");
			let id = localStorage.getItem("userId");
			axios.get(`/users/getMenus/${id}`).then(resp => {
				this.submenuList = resp.data;
			})
		}
	}
</script>

<style>
	html,
	body {
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}

	#app {
		height: 100%;
	}

	.el-header,
	.el-footer {
		background-color: #9f9ca3;
		color: #333;
		text-align: center;
		line-height: 60px;
	}


	.el-aside {
		background-color: #374758;
		color: #333;
		text-align: 13px;
		line-height: 200px;

	}

	.el-submenu__title {
		padding-left: 20px;
		text-align: 13px;
	}

	.el-submenu__title {
		padding-left: 20px;
	}



	.el-main {
		color: #333;
		padding: 0px;
	}

	.el-container {
		height: 100%;
	}

	.el-container {
		margin-bottom: 0px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
